<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改作品')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-work-edit" th:object="${compWork}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">作品标题：</label>
            <div class="col-sm-8">
                <input name="title" th:field="*{title}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">参赛用户ID：</label>
            <div class="col-sm-8">
                <input name="participantUserId" th:field="*{participantUserId}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">参赛时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="participateTime" th:value="${#dates.format(compWork.participateTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">学生评委成绩：</label>
            <div class="col-sm-8">
                <input name="studentScore" th:field="*{studentScore}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">教师评委成绩：</label>
            <div class="col-sm-8">
                <input name="teacherScore" th:field="*{teacherScore}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">大众点评成绩：</label>
            <div class="col-sm-8">
                <input name="publicScore" th:field="*{publicScore}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">${comment}：</label>
            <div class="col-sm-8">
                <input name="totalScore" th:field="*{totalScore}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">记录创建时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="createdAt" th:value="${#dates.format(compWork.createdAt, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">记录更新时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="updatedAt" th:value="${#dates.format(compWork.updatedAt, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">作品名称：</label>
            <div class="col-sm-8">
                <input name="workName" th:field="*{workName}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">作品封面存储路径：</label>
            <div class="col-sm-8">
                <input name="workCover" th:field="*{workCover}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">作品简介：</label>
            <div class="col-sm-8">
                <input name="workIntro" th:field="*{workIntro}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">联系人姓名：</label>
            <div class="col-sm-8">
                <input name="contactName" th:field="*{contactName}" class="form-control" type="text" required>
            </div>
        </div>



<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">微情景剧本：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="workScript" th:field="*{workScript}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">微情境视频：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="workVideo1" th:field="*{workVideo1}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">宣讲文稿：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="workVideo2" th:field="*{workSpeech}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">微宣讲视频：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="workSpeech" th:field="*{workVideo2}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">其他附件：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="workOther" th:field="*{workOther}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->

        <style>
            .file-input-group {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .file-actions {
                display: flex;
                gap: 5px;
                flex-shrink: 0;
            }

            @media (max-width: 768px) {
                .file-input-group {
                    flex-direction: column;
                    align-items: stretch;
                }

                .file-actions {
                    justify-content: flex-start;
                }
            }
        </style>

        <div class="form-group">
            <label class="col-sm-3 control-label">微情景剧本：</label>
            <div class="col-sm-8">
                <div class="file-input-group">
                    <input name="workScript" th:field="*{workScript}" class="form-control" type="text">
                    <div class="file-actions" th:if="*{workScript}">
                        <a th:href="*{workScript}" download class="btn btn-xs btn-success">下载</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">微情境视频：</label>
            <div class="col-sm-8">
                <div class="file-input-group">
                    <input name="workVideo1" th:field="*{workVideo1}" class="form-control" type="text">
                    <div class="file-actions" th:if="*{workVideo1}">
                        <a th:href="*{workVideo1}" download class="btn btn-xs btn-success">下载</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">宣讲文稿：</label>
            <div class="col-sm-8">
                <div class="file-input-group">
                    <input name="workVideo2" th:field="*{workSpeech}" class="form-control" type="text">
                    <div class="file-actions" th:if="*{workSpeech}">
                        <a th:href="*{workSpeech}" download class="btn btn-xs btn-success">下载</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">微宣讲视频：</label>
            <div class="col-sm-8">
                <div class="file-input-group">
                    <input name="workSpeech" th:field="*{workVideo2}" class="form-control" type="text">
                    <div class="file-actions" th:if="*{workVideo2}">
                        <a th:href="*{workVideo2}" download class="btn btn-xs btn-success">下载</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">其他附件：</label>
            <div class="col-sm-8">
                <div class="file-input-group">
                    <input name="workOther" th:field="*{workOther}" class="form-control" type="text">
                    <div class="file-actions" th:if="*{workOther}">
                        <a th:href="*{workOther}" download class="btn btn-xs btn-success">下载</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 视频预览模态框 -->
        <div class="modal fade" id="videoModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">视频预览</h4>
                    </div>
                    <div class="modal-body">
                        <video id="modalVideo" controls style="width: 100%;">
                            您的浏览器不支持视频播放
                        </video>
                    </div>
                </div>
            </div>
        </div>
































<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">${comment}：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="lookCount" th:field="*{lookCount}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">${comment}：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="likeCount" th:field="*{likeCount}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">${comment}：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="shareCount" th:field="*{shareCount}" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "comp/work";
    $("#form-work-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-work-edit').serialize());
        }
    }

    $("input[name='participateTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='createdAt']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='updatedAt']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });


    function previewVideoModal(videoUrl) {
        if (!videoUrl) return;

        const video = document.getElementById('modalVideo');
        video.src = videoUrl;
        $('#videoModal').modal('show');

        // 模态框关闭时暂停视频
        $('#videoModal').on('hidden.bs.modal', function() {
            video.pause();
        });
    }




</script>
</body>
</html>